<template>
  <div class="hr-planning-container">
    <span class="print-btn">
      <router-link style="position: relative;" to="/main/renshi/renliziyuanguihua">返回</router-link>
      <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button>
    </span>
    <div class="page">
      <h1 class="title" @dblclick="toggleEdit('title')">
        <template v-if="title.isEditing">
          <input v-model="title.value" @blur="toggleEdit('title')" @keyup.enter="toggleEdit('title')">
        </template>
        <template v-else>
          {{ title.value }}
        </template>
      </h1>
      <div class="section" id="definition-and-significance">
        <h2 class="section-title" @dblclick="toggleEdit('definitionAndSignificanceTitle')">
          <template v-if="definitionAndSignificanceTitle.isEditing">
            <input v-model="definitionAndSignificanceTitle.value" @blur="toggleEdit('definitionAndSignificanceTitle')"
              @keyup.enter="toggleEdit('definitionAndSignificanceTitle')">
          </template>
          <template v-else>
            {{ definitionAndSignificanceTitle.value }}
          </template>
        </h2>
        <p @dblclick="toggleEdit('definitionAndSignificanceContent')">
          <template v-if="definitionAndSignificanceContent.isEditing">
            <textarea v-model="definitionAndSignificanceContent.value"
              @blur="toggleEdit('definitionAndSignificanceContent')"
              @keyup.enter="toggleEdit('definitionAndSignificanceContent')"></textarea>
          </template>
          <template v-else>
            {{ definitionAndSignificanceContent.value }}
          </template>
        </p>
      </div>
      <div class="section" id="principles">
        <h2 class="section-title" @dblclick="toggleEdit('principlesTitle')">
          <template v-if="principlesTitle.isEditing">
            <input v-model="principlesTitle.value" @blur="toggleEdit('principlesTitle')"
              @keyup.enter="toggleEdit('principlesTitle')">
          </template>
          <template v-else>
            {{ principlesTitle.value }}
          </template>
        </h2>
        <ul class="principle-list">
          <li v-for="(principle, index) in principles" :key="index" @dblclick="toggleEdit(`principle${index}`)">
            <template v-if="principles[index].isEditing">
              <input v-model="principles[index].value" @blur="toggleEdit(`principle${index}`)"
                @keyup.enter="toggleEdit(`principle${index}`)">
            </template>
            <template v-else>
              {{ principle.value }}
            </template>
          </li>
        </ul>
      </div>
      <div class="section" id="steps">
        <h2 class="section-title" @dblclick="toggleEdit('stepsTitle')">
          <template v-if="stepsTitle.isEditing">
            <input v-model="stepsTitle.value" @blur="toggleEdit('stepsTitle')" @keyup.enter="toggleEdit('stepsTitle')">
          </template>
          <template v-else>
            {{ stepsTitle.value }}
          </template>
        </h2>
        <ol class="step-list">
          <li v-for="(step, index) in steps" :key="index" @dblclick="toggleEdit(`step${index}`)">
            <template v-if="steps[index].isEditing">
              <input v-model="steps[index].value" @blur="toggleEdit(`step${index}`)"
                @keyup.enter="toggleEdit(`step${index}`)">
            </template>
            <template v-else>
              {{ step.value }}
            </template>
          </li>
        </ol>
      </div>
    </div>

    <div class="page">
      <div class="section" id="key-elements">
        <h2 class="section-title" @dblclick="toggleEdit('keyElementsTitle')">
          <template v-if="keyElementsTitle.isEditing">
            <input v-model="keyElementsTitle.value" @blur="toggleEdit('keyElementsTitle')"
              @keyup.enter="toggleEdit('keyElementsTitle')">
          </template>
          <template v-else>
            {{ keyElementsTitle.value }}
          </template>
        </h2>
        <ul class="key-element-list">
          <li v-for="(keyElement, index) in keyElements" :key="index" @dblclick="toggleEdit(`keyElement${index}`)">
            <template v-if="keyElements[index].isEditing">
              <input v-model="keyElements[index].value" @blur="toggleEdit(`keyElement${index}`)"
                @keyup.enter="toggleEdit(`keyElement${index}`)">
            </template>
            <template v-else>
              {{ keyElement.value }}
            </template>
          </li>
        </ul>
      </div>
      <div class="section" id="case-studies">
        <h2 class="section-title" @dblclick="toggleEdit('caseStudiesTitle')">
          <template v-if="caseStudiesTitle.isEditing">
            <input v-model="caseStudiesTitle.value" @blur="toggleEdit('caseStudiesTitle')"
              @keyup.enter="toggleEdit('caseStudiesTitle')">
          </template>
          <template v-else>
            {{ caseStudiesTitle.value }}
          </template>
        </h2>
        <div class="case-study" v-for="(caseStudy, index) in caseStudies" :key="index">
          <h3 class="case-study-title" @dblclick="toggleEdit(`caseStudy${index}Title`)">
            <template v-if="caseStudies[index].title.isEditing">
              <input v-model="caseStudies[index].title.value" @blur="toggleEdit(`caseStudy${index}Title`)"
                @keyup.enter="toggleEdit(`caseStudy${index}Title`)">
            </template>
            <template v-else>
              {{ caseStudy.title.value }}
            </template>
          </h3>
          <p @dblclick="toggleEdit(`caseStudy${index}Content`)">
            <template v-if="caseStudies[index].content.isEditing">
              <textarea v-model="caseStudies[index].content.value" @blur="toggleEdit(`caseStudy${index}Content`)"
                @keyup.enter="toggleEdit(`caseStudy${index}Content`)">
            </textarea>
            </template>
            <template v-else>
              {{ caseStudy.content.value }}
            </template>
          </p>
        </div>
      </div>
    </div>
    <div class="page">
      <div class="summary">
        <h2 class="section-title" @dblclick="toggleEdit('summaryTitle')">
          <template v-if="summaryTitle.isEditing">
            <input v-model="summaryTitle.value" @blur="toggleEdit('summaryTitle')"
              @keyup.enter="toggleEdit('summaryTitle')">
          </template>
          <template v-else>
            {{ summaryTitle.value }}
          </template>
        </h2>
        <p @dblclick="toggleEdit('summaryContent')">
          <template v-if="summaryContent.isEditing">
            <textarea v-model="summaryContent.value" @blur="toggleEdit('summaryContent')"
              @keyup.enter="toggleEdit('summaryContent')"></textarea>
          </template>
          <template v-else>
            {{ summaryContent.value }}
          </template>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 标题
      title: {
        value: '战略层面人力资源规划',
        isEditing: false
      },
      // 定义与意义部分
      definitionAndSignificanceTitle: {
        value: '一、定义与意义',
        isEditing: false
      },
      definitionAndSignificanceContent: {
        value: '人力资源规划是指企业为实现其战略目标，根据内外环境的变化，对人力资源的获取、配置、利用、开发和激励等进行长期性和前瞻性的计划和安排。在战略层面，人力资源规划的意义在于确保人力资源的配置和开发与企业战略相匹配，从而支持企业战略目标的实现。',
        isEditing: false
      },
      // 制定原则部分
      principlesTitle: {
        value: '二、制定原则',
        isEditing: false
      },
      principles: [
        { value: '整体性原则：将人力资源规划纳入企业战略规划的总体框架中，确保各项人力资源政策与企业的战略目标相协调。', isEditing: false },
        { value: '动态性原则：根据企业战略的调整和市场环境的变化，不断优化和调整人力资源规划。', isEditing: false },
        { value: '人性化原则：关注员工的需求和成长，营造有利于员工发展的企业文化。', isEditing: false }
      ],
      // 制定步骤部分
      stepsTitle: {
        value: '三、制定步骤',
        isEditing: false
      },
      steps: [
        { value: '明确企业战略目标：分析企业愿景、使命和长期发展目标，确定人力资源规划需要支持的战略方向。', isEditing: false },
        { value: '分析现有人力资源状况：包括员工的数量、质量、结构（如年龄、性别、教育背景等），以及员工在各个职位和部门的分布情况。同时，评估员工的绩效、技能、动机，以及他们对组织的满意度和忠诚度。', isEditing: false },
        { value: '制定人力资源规划方案：基于对企业战略目标和人力资源现状的理解，制定具体的人力资源规划方案。这可能包括招聘、培训、绩效管理和薪酬福利等方面的政策措施。', isEditing: false },
        { value: '实施人力资源规划方案：将规划方案转化为具体的行动计划，并确保各项政策措施得到有效执行。这包括招聘新员工、培训和教育现有员工、制定和调整薪酬和福利政策等。', isEditing: false },
        { value: '评估与调整：对人力资源规划的实施效果进行评估，根据评估结果进行调整和优化。评估可以包括对员工满意度、绩效、流失率的衡量，以及对新战略的实际效果的主观和客观评价。', isEditing: false }
      ],
      // 关键要素部分
      keyElementsTitle: {
        value: '四、关键要素',
        isEditing: false
      },
      keyElements: [
        { value: '人才队伍的建设：选拔和培养具备战略思维和领导能力的高层管理人才，以及具备专业技能和创新精神的中基层人才。', isEditing: false },
        { value: '员工能力的提升：通过培训和激励等手段，提升员工的业务能力和综合素质。', isEditing: false },
        { value: '人才结构的优化：根据企业发展战略的需要，调整人才队伍的结构，提高人才队伍的整体素质。', isEditing: false },
        { value: '企业文化的培育：塑造有利于企业发展战略实现的企业文化，增强员工的归属感和忠诚度。', isEditing: false }
      ],
      // 实践案例部分
      caseStudiesTitle: {
        value: '五、实践案例',
        isEditing: false
      },
      caseStudies: [
        {
          title: { value: 'IBM的员工技能提升和再培训', isEditing: false },
          content: { value: 'IBM通过大规模提升员工技能，以满足未来的业务需求，并在瞬息万变的市场中保持竞争力。这体现了战略层面人力资源规划中对员工能力提升的重视。', isEditing: false }
        },
        {
          title: { value: '谷歌提高员工敬业度并留住员工', isEditing: false },
          content: { value: '谷歌通过创造包容性环境、支持员工职业发展等措施，提高了员工敬业度并降低了离职率。这体现了战略层面人力资源规划中对人才队伍建设和企业文化培育的关注。', isEditing: false }
        },
        {
          title: { value: '微软的DEIB计划', isEditing: false },
          content: { value: '微软实施多元化、公平、包容和归属感（DEIB）计划，以建立一个多元化和包容性的工作场所。这体现了战略层面人力资源规划中对人才结构优化和企业文化培育的考虑。', isEditing: false }
        }
      ],
      // 总结部分
      summaryTitle: {
        value: '总结',
        isEditing: false
      },
      summaryContent: {
        value: '综上所述，战略层面的人力资源规划是企业实现战略目标的重要保障。企业应遵循整体性、动态性和人性化的原则，制定明确的人力资源规划方案，并关注人才队伍的建设、员工能力的提升、人才结构的优化和企业文化的培育等关键要素。同时，企业还应通过实践案例不断学习和借鉴成功经验，以优化和完善自身的人力资源规划体系。',
        isEditing: false
      }
    };
  },
  methods: {
    printForm() {
      window.print();
    },
    toggleEdit(key) {
      if (key.startsWith('principle') || key.startsWith('step') || key.startsWith('keyElement')) {
        const index = parseInt(key.replace(/\D/g, ''));
        this[key.startsWith('principle') ? 'principles' : key.startsWith('step') ? 'steps' : 'keyElements'][index].isEditing = !this[key.startsWith('principle') ? 'principles' : key.startsWith('step') ? 'steps' : 'keyElements'][index].isEditing;
      } else if (key.startsWith('caseStudy')) {
        const caseIndex = parseInt(key.match(/\d+/)[0]);
        if (key.endsWith('Title')) {
          this.caseStudies[caseIndex].title.isEditing = !this.caseStudies[caseIndex].title.isEditing;
        } else {
          this.caseStudies[caseIndex].content.isEditing = !this.caseStudies[caseIndex].content.isEditing;
        }
      } else {
        this[key].isEditing = !this[key].isEditing;
      }
      if (!this[key].isEditing) {
        // 这里可以添加保存数据到后端的逻辑
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.hr-planning-container {
  width: 80%;
  max-width: 210mm;
  margin: 0 auto;
  padding: 20px;
  // background-color: #f9f9f9;
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-family: '宋体';
  text-align: left;
  min-height: 100vh;
}

.page {
  width: 210mm;
  height: 297mm;
  padding: 20mm;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  page-break-after: always;
  text-align: left;
  line-height: 29.3326px;
  letter-spacing: 0.1039em;
  margin-top: 20px;
}

.print-btn {
  display: flex;
  justify-content: space-between;
}

.title {
  text-align: center;
  // margin-bottom: 20px;
  color: #333;
  padding-top: 0px !important;
  font-size: 28px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  color: #007bff;
  // margin-bottom: 15px;
}

.principle-list,
.step-list,
.key-element-list {
  list-style-type: none;
  padding: 0;
}

.principle-list li,
.step-list li,
.key-element-list li {
  margin-bottom: 10px;
  line-height: 1.6;
  text-indent: 2em;
}

.case-study {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.case-study-title {
  color: #333;
  margin-bottom: 10px;
}

.summary {
  // font-weight: bold;
}

input,
textarea {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  border-color: #007bff;
  outline: none;
  background-color: #fff;
}

p {
  text-indent: 2em;
  line-height: 2em;
}

@media print {
  .hr-planning-container {
    width: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .page {
    box-shadow: none;
    border: none
  }

  .print-btn {
    display: none;
  }

  body {
    font-family: '宋体';
  }
}
</style>